import TablePage from "@/components/TablePage/TablePage";
import { defineComponent, reactive, ref } from "vue";
import songCategoryService from "./index.service";
import { tablesInterface } from "@/common/interface/table.interface";
import Add from "./Add/Add";

export default defineComponent({
  name: 'Index',
  setup() {
    const tablePageRef = ref(null as any);
    // 表格定义
    const tables = reactive({
      list: [
        {
          title: "歌曲分类",
          rowKey: "id",
          columns: [
            {
              title: "ID",
              dataIndex: "id",
              align: "center",
              width: "80px",
            },
            {
              title: "中文名称",
              dataIndex: "chineseName",
              align: "center",
              width: "200px",
            },
            {
              title: "英文名称",
              dataIndex: "englishName",
              align: "center",
              width: "100px",
            },
            {
              title: "手机封面",
              dataIndex: "imageUrl",
              align: "center",
              width: "140px",
            },
            {
              title: "ipad封面",
              dataIndex: "ipadImageUrl",
              align: "center",
              width: "140px",
            },
            {
              title: "排序",
              dataIndex: "sort",
              align: "center",
              width: "240px",
            },
            {
              title: "中文显示",
              dataIndex: "zhDisplay",
              align: "center",
              width: "80px",
            },
            {
              title: "英文显示",
              dataIndex: "enDisplay",
              align: "center",
              width: "200px",
            },
          ],
          toolbar: {
            left: ["refresh", "add"],
            right: ["filter"],
            add: {
              handler: () => {
                const addPopupRef = tablePageRef.value.getPopup("addRef");
                addPopupRef.value.open({ type: 'add' });
              }
            },
          },
          searchForm: {
            
          },
          service: new songCategoryService(),
          bodyCell: ({ text, record, index, column }) => {
            if (column.dataIndex === 'imageUrl') {
              return <a-image src={record.imageUrl}></a-image>
            }
            if (column.dataIndex === 'ipadImageUrl') {
              return <a-image src={record.ipadImageUrl}></a-image>
            }
            if (column.dataIndex === 'zhDisplay') {
              return record.zhDisplay === 0 ? <span>隐藏</span> : <span>显示</span>
            }
            if (column.dataIndex === 'enDisplay') {
              return record.enDisplay === 0 ? <span>隐藏</span> : <span>显示</span>
            }
          },
          operation: [
            {
              type: "add",
              text: "添加子分类",
              clickHandler: ({ record }) => {
                const addPopupRef = tablePageRef.value.getPopup("addRef");
                addPopupRef.value.open({ type: 'add', parentId: record.id });
              }
            },
            {
              type: "edit",
              clickHandler: ({ record }) => {
                const addPopupRef = tablePageRef.value.getPopup("addRef");
                addPopupRef.value.open({ type: 'edit', id: record.id });
              }
            },
            {
              type: "delete",
              clickHandler: "delete",
            },
          ],
          popups: [
            {
              ref: "addRef",
              dom: () => <Add onChange={() => { tablePageRef.value.reload() }} />,
            }
          ],
          pagination: true,
          tableSourceFormat: {
            data: 'rows',
            pageSize: 'pageSize',
            current: 'pageNum',
          },
        }
      ],
    } as tablesInterface);
    // 配置项
    const config = reactive({
      table: tables.list[0],
    })
    return () => (
      <TablePage ref={tablePageRef} config={config}></TablePage>
    )
  }
})